import { Box, HorizontalStack, VerticalStack, Text, Link } from "@shopify/polaris";

const ReportFooter = () => {
    return (
        <>
            <Box paddingBlockStart={6} paddingBlockEnd={6} paddingInlineStart={5} paddingInlineEnd={5}>
                <div className='badges-info-container'>
                    <Text color='subdued' alignment='center'>Assessment conducted using Akto's API Security Platform<br />G2 High Performer in API Security - 2024</Text>
                </div>

                <Box width='100%' paddingBlockStart={4}>
                    <HorizontalStack gap={4} align='center'>
                        <VerticalStack gap={2} align='center' inlineAlign='center'>
                            <Text fontWeight='semibold' color='subdued'>DAST</Text>
                            <Link url='https://www.g2.com/products/akto/reviews' target='_blank' removeUnderline><img src='/public/g2-badge-2.png' alt="Footer Image" className='g2-badge' /></Link>
                        </VerticalStack>

                        <VerticalStack gap={2} align='center' inlineAlign='center'>
                            <Text>{"\u2008"}</Text> {/* Invisible character unicode */}
                            <Link url='https://www.g2.com/products/akto/reviews' target='_blank' removeUnderline><img src='/public/g2-badge-1.png' alt="Footer Image" className='g2-badge' /></Link>
                        </VerticalStack>

                        <VerticalStack gap={2} align='center' inlineAlign='center'>
                            <Text fontWeight='semibold' color='subdued'>API SECURITY</Text>
                            <Link url='https://www.g2.com/products/akto/reviews' target='_blank' removeUnderline><img src='/public/g2-badge-2.png' alt="Footer Image" className='g2-badge' /></Link>
                        </VerticalStack>
                    </HorizontalStack>
                </Box>
            </Box>

            <div className='report-end-image-container'>
                <img src="/public/vul_report_bg.svg" alt="Footer Image" className='report-end-image' />
                <div className='report-end-image-text'>The End.</div>
            </div>
        </>
    )
}

export default ReportFooter;